<template>
  <div class="create_vote">
    <div class="main_content">
      <div class="group">
        <div class="title">
          <div class="title_content">投票标题</div>
          <div class="slot_right"></div>
        </div>
        <label class="L_input" data-model="voteTitle">
          <div
            class="content_box input_box"
            :class="focusInput == 'voteTitle' ? 'on_focus' : ''"
          >
            <input
              type="text"
              placeholder="请填写标题"
              maxlength="32"
              class="input input_text"
              placeholder-style="fontSize:14px"
              v-model="voteTitle"
              @focus="focusInput = 'voteTitle'"
              @blur="focusInput = ''"
            />
            <div class="indicator">{{ voteTitle.length }}/32</div>
          </div>
        </label>
        <template v-if="introShow || introduction">
          <div class="title">
            <div class="title_content">投票说明</div>
            <div class="slot_right"></div>
          </div>
          <label class="L_input" data-model="introduction">
            <div
              class="content_box textarea_box"
              :class="focusInput == 'introduction' ? 'on_focus' : ''"
            >
              <textarea
                placeholder="请填写投票说明(选填)"
                maxlength="100"
                class="textarea"
                v-model="introduction"
                @focus="focusInput = 'introduction'"
                @blur="focusInput = ''"
              ></textarea>
              <div class="indicator">{{ introduction.length }}/100</div>
            </div>
          </label>
        </template>
        <div class="add_button" v-else @click="introShow = true">
          <i class="iconfont icon-tianjia"></i>添加说明
        </div>
      </div>
      <div class="group">
        <div class="title">
          <div class="title_content">投票类型</div>
          <div class="slot_right">
            <label
              class="L_radio"
              v-for="config in configs"
              @click="configRadio(config.value)"
            >
              <div
                class="radio_icon"
                :class="at_config == config.value ? 'checked' : ''"
              ></div>
              <radio
                class="radio_input"
                name="at_config"
                :value="config.value"
              />
              {{ config.label }}
            </label>
          </div>
        </div>
      </div>
      <div class="group">
        <div class="title">
          <div class="title_content">投票选项</div>
          <div class="slot_right"></div>
        </div>
        <label
          class="L_input"
          :data-model="`number${index}`"
          v-for="(voteoption, index) in voteOptions"
          :key="index"
        >
          <div
            class="content_box input_box"
            :class="focusInput == `number${index}` ? 'on_focus' : ''"
          >
            <div
              class="L_upload"
              v-show="at_config == 'image'"
              @click="upload(voteoption)"
            >
              <div
                class="image_box"
                :class="voteoption.imagePath"
                :style="[
                  voteoption.imagePath
                    ? { backgroundImage: `url(${voteoption.imagePath})` }
                    : {},
                ]"
              ></div>
              <div class="bg_color"></div>
            </div>
            <input
              type="text"
              :placeholder="`请填写选项内容${index + 1}`"
              maxlength="20"
              class="input input_text"
              placeholder-style="fontSize:14px"
              v-model="voteoption.value"
              @focus="focusInput = `number${index}`"
              @blur="focusInput = ''"
            />
            <div class="indicator">{{ voteoption.value.length }}/20</div>
          </div>
          <div
            class="option_delete"
            v-if="voteOptions.length > 2"
            @click="deleteVoteOption(index)"
          >
            <i class="iconfont icon-shanchu"></i>
          </div>
        </label>
        <!-- 最多20个选项 -->
        <div
          class="add_button"
          v-show="voteOptions.length < 20"
          @click="addVoteOption"
        >
          <i class="iconfont icon-tianjia"></i>添加选项
        </div>
      </div>
      <div class="group">
        <div class="title">
          <div class="title_content">更多设置</div>
          <div class="slot_right"></div>
        </div>
        <div class="title">
          <div class="title_content">单选/多选</div>
          <div class="slot_right">
            <label class="L_selector">
              <select class="selector" v-model="voteoptionCount">
                <option
                  :value="`${index + 1}`"
                  v-for="(option, index) in voteOptions"
                >
                  {{ (index + 1) | countOptionFilter }}
                </option>
              </select>
            </label>
          </div>
        </div>
        <div class="title">
          <div class="title_content">投票时长</div>
          <div class="slot_right">
            <label class="L_selector">
              <select class="selector" v-model="voteDuration">
                <option
                  :value="option.value"
                  v-for="option in voteDurationOptions"
                >
                  {{ option.label }}
                </option>
              </select>
            </label>
          </div>
        </div>
      </div>
    </div>
    <div class="button_bar">
      <div class="button" @click="closeVote">取消</div>
      <div
        class="button"
        :class="submitActive ? 'active no_border' : ''"
        @click="submit"
      >
        {{ submitType == "save" ? "发起投票" : "更新投票" }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      voteTitle: "",
      introduction: "",
      at_config: "text",
      voteOptions: [
        { value: "", imagePath: "" },
        { value: "", imagePath: "" },
      ], //投票选项
      introShow: false,
      configs: [
        { value: "text", label: "文字投票" },
        { value: "image", label: "图片投票" },
      ],
      voteoptionCount: 1,
      voteDurationOptions: [
        { value: "259200", label: "三天" },
        { value: "604800", label: "一周" },
        { value: "2592000", label: "一个月" },
      ],
      voteDuration: "259200",
      submitType: "save",
      focusInput: "",
    };
  },
  props: {
    voteContent: {
      typeof: Object,
      required: true,
    },
  },
  mounted() {
    if (this.voteContent) {
      this.submitType = "update";
      Object.keys(this.voteContent).forEach((key) => {
        this[key] = this.voteContent[key];
      });
    }
  },
  methods: {
    closeVote() {
      this.$emit("close");
    },
    configRadio(value) {
      if (value != this.at_config) this.at_config = value;
    },
    addVoteOption() {
      this.voteOptions.push({ value: "" });
    },
    deleteVoteOption(index) {
      this.voteOptions.splice(index, 1);
      if (this.voteoptionCount > this.voteOptions.length) {
        this.voteoptionCount--;
      }
    },
    upload(option) {
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album"], //从相册选择
        success: (res) => {
          let path = res.tempFilePaths[0];
          this.$set(option, "imagePath", path);
        },
      });
    },
    beforeSubmitCheck(submit = true) {
      if (!this.voteTitle) {
        if (submit) {
          this.$util.Tips({
            title: "请填写投票标题",
          });
        }
        return false;
      }
      for (let [index, item] of Object.entries(this.voteOptions)) {
        if (
          (this.at_config == "image" && (!item.value || !item.imagePath)) ||
          (this.at_config == "text" && !item.value)
        ) {
          if (submit) {
            this.$util.Tips({
              title: "请填写完所有选项",
            });
          }
          return false;
        }
      }
      return true;
    },
    submit() {
      if (!this.beforeSubmitCheck()) return;
      let voteContent = {
        voteTitle: this.voteTitle,
        introduction: this.introduction,
        voteOptions: this.voteOptions,
        at_config: this.at_config,
        voteoptionCount: this.voteoptionCount,
        voteDuration: this.voteDuration,
      };
      this.$emit("submit", voteContent, this.submitType);
      this.$emit("close");
    },
  },
  filters: {
    countOptionFilter(number) {
      if (number == 1) {
        return "单选";
      } else {
        return `最多选${number}项`;
      }
    },
  },
  computed: {
    submitActive() {
      return this.beforeSubmitCheck(false);
    },
  },
};
</script>

<style lang="scss">
* {
  list-style: none;
  margin: 0;
  padding: 0;
}
.create_vote {
  position: absolute;
  border: 1px solid #e5e9f0;
  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.17);
  border-radius: 4px;
  top: 30px;
  left: -15px;
  width: 414px;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  z-index: 8;
  word-break: break-all;
  box-sizing: border-box;
  .main_content {
    flex: 1;
    min-height: 200px;
    max-height: 400px;
    overflow: auto;
    padding: 20px;
    .group {
      & + .group {
        margin-top: 30px;
      }
      .title {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin: 8px 0;
        color: #212121;
        font-size: 14px;
        line-height: 22px;
        &:first-child {
          margin-top: 0;
        }
        .title_content {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          min-width: 65px;
          margin-right: 27px;
        }
        .slot_right {
          display: flex;
          flex-direction: row;
        }
      }
      .L_radio {
        & + .L_radio {
          margin-left: 24px;
        }
        display: flex;
        flex-direction: row;
        justify-items: center;
        align-items: center;
        font-size: 14px;
        color: #505050;
        margin: 8px 0;
        cursor: pointer;
        .radio_icon {
          width: 16px;
          height: 16px;
          border: 1px solid #00a1d6;
          border-radius: 50%;
          position: relative;
          margin-right: 8px;
        }
        .radio_input {
          width: 0;
          height: 0;
          visibility: hidden;
        }
        .checked::before {
          content: "";
          display: block;
          width: 8px;
          height: 8px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background-color: #00a1d6;
          border-radius: 50%;
        }
      }
      .L_input {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin: 8px 0;
        color: #212121;
        font-size: 14px;
        line-height: 22px;
        .content_box {
          position: relative;
          display: flex;
          flex: 1;
          justify-content: flex-start;
          align-items: center;
          border-radius: 4px;
          .input {
            height: 38px;
            flex: 1;
            margin: 0 5px 0 10px;
            font-size: 14px;
            & + .indicator {
              top: 2px;
              position: relative;
            }
          }
          .textarea {
            height: 60px;
            width: 100%;
            padding: 10px;
            resize: none;
            font-size: 14px;
            cursor: text;
            & + .indicator {
              height: 22px;
              bottom: 5px;
              position: absolute;
            }
          }
          .indicator {
            color: #999;
            font-size: 14px;
            background-color: #fff;
            right: 10px;
            cursor: default;
          }
          &::before {
            content: "";
            width: 200%;
            height: 200%;
            border: 1px solid #e8ecf1;
            border-radius: 8px;
            position: absolute;
            top: 0;
            left: 0;
            transform-origin: 0 0;
            transform: scale(0.5);
            z-index: -1;
            transition: 100ms border;
          }
          &.on_focus::before {
            border: 1px solid #00a1d6;
          }
        }
        .option_delete {
          width: 38px;
          height: 38px;
          cursor: pointer;
          margin-right: -10px;
          text-align: center;
          line-height: 38px;
          color: #00a1d6;
        }
      }
      .L_selector {
        position: relative;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 168px;
        height: 38px;
        border-radius: 4px;
        &::before {
          content: "";
          width: 200%;
          height: 200%;
          border: 1px solid #e8ecf1;
          border-radius: 8px;
          position: absolute;
          top: 0;
          left: 0;
          transform-origin: 0 0;
          transform: scale(0.5);
          z-index: -1;
          transition: 100ms border;
        }
        .selector {
          margin: 10px;
          flex: 1;
          box-shadow: none;
          border: none;
          background-color: #fff;
          font-size: 14px;
          outline: none;
          cursor: pointer;
        }
      }
      .L_upload {
        width: 38px;
        height: 38px;
        position: relative;
        cursor: pointer;
        background-color: transparent;
        &::before {
          content: "";
          height: 100%;
          width: 1px;
          border-right: 1px solid #e8ecf1;
          position: absolute;
          top: 0;
          right: -1px;
          transform: scaleX(0.5);
          transform-origin: 0 0;
          z-index: 1;
        }
        .image_box {
          width: 100%;
          height: 100%;
          background-image: url("/static/video/add_pic.png");
          background-size: 26px 26px;
          background-position: center center;
          background-repeat: no-repeat;
        }
      }
      .add_button {
        display: flex;
        align-items: center;
        color: #00a1d6;
        font-size: 14px;
        margin: 8px 0;
        cursor: pointer;
        .icon-tianjia {
          font-size: 20px;
          font-weight: bold;
        }
      }
    }
  }
  .button_bar {
    padding: 15px 20px;
    position: relative;
    display: flex;
    justify-content: flex-end;
    &::before {
      content: "";
      width: 100%;
      height: 1px;
      border-bottom: 1px solid #e8ecf1;
      position: absolute;
      bottom: -1px;
      top: 0;
      left: 0;
      transform-origin: 0 0;
      transform: scaleY(0.5);
      z-index: -1;
    }
    .button {
      min-width: 90px;
      padding: 5px;
      text-align: center;
      position: relative;
      color: #505050;
      font-size: 14px;
      border-radius: 4px;
      cursor: pointer;
      & + .button {
        margin-left: 10px;
      }
      &::before {
        content: "";
        position: absolute;
        width: 200%;
        height: 200%;
        transform: scale(0.5);
        border: 1px solid #e8ecf1;
        border-radius: 8px;
        top: 0;
        left: 0;
        z-index: -1;
        transform-origin: 0 0;
      }
      &.active {
        background-color: #00a1d6;
        color: #fff;
      }
      &.no_border::before {
        border: none;
      }
    }
  }
}
</style>